<template>
    <view>
        <view class="text-title">提现金额</view>
        <view class="text-price">￥{{ priceNum }}</view>
        <view class="text-tips">提现审核通过后，可以将提现金额领取到微信零钱</view>
        <button class="button-style" hover-class="button-hover" @click="handleClick()"> 确定 </button>
        <uni-popup ref="sendCodeRef" :maskClick="false" :maskBackgroundColor="'rgba(0, 0, 0, 0.6)'">
            <view class="code-form-main">
                <view class="popup-title">请输入您的真实姓名</view>
                <uni-forms ref="baseForm">
                    <uni-forms-item>
                        <uni-easyinput :inputBorder="false" v-model="name" placeholder="请输入姓名" />
                    </uni-forms-item>
                </uni-forms>
                <view class="footer-btn-box" style="width: 100%;">
                    <button @click="closeSendForm" class="cancle-btn">取消</button>
                    <button :loading="loading" :disabled="loading" @click="FormSubmit" type="primary"
                        class="confirm-btn">确定</button>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import { wxWithdrawApi } from '@/api/user'
import { APP_ID } from "@/config/app";
export default {
    data() {
        return {
            priceNum: null,
            loading: false,
            name: ''
        }
    },
    onLoad(opt) {
        if (opt.priceNum) {

            this.priceNum = opt.priceNum
        }
    },
    methods: {
        closeSendForm() {
            this.name = ''
            this.$refs.sendCodeRef.close()
        },
        handleClick() {
            this.$refs.sendCodeRef.open()
        },
        FormSubmit() {
            if (!this.name) return this.$util.Tips('请输入真实姓名')
            this.loading = true
            let params = {
                appId: APP_ID,
                type: 5,
                price: this.priceNum * 100,
                name: this.name,
                transferChannelCode: 'wx_lite'
            }
            wxWithdrawApi(params).then(res => {
                this.$util.Tips({ title: '申请成功，等待后台审核。' }, () => {
                    this.$refs.sendCodeRef.close()
                    uni.$emit('ACTIVITY_GRAB_REFRESH')
                    uni.navigateBack()
                })
            }).finally(() => {
                this.loading = false
            })
        }
    }
}
</script>

<style lang="scss">
page {
    background-color: #fff;
}

.popup-title {
    text-align: center;
    margin-bottom: 30rpx;
    font-weight: 400;
    font-size: 30rpx;
    color: #333333;
}

.text-title {
    margin: 50rpx 30rpx;
    font-weight: 400;
    font-size: 24rpx;
    color: #333333;
}

.text-price {
    margin: 0 30rpx;
    font-weight: 600;
    font-size: 80rpx;
    color: #333333;
    padding: 10rpx 0;
    border-bottom: 1rpx solid #EDEDED;
}

.text-tips {
    font-weight: 400;
    font-size: 24rpx;
    color: #999999;
    margin-left: 30rpx;
    margin-top: 30rpx;
}

.button-style {
    margin: 130rpx 30rpx;
    height: 88rpx;
    line-height: 88rpx;
    background: #276FF7;
    border-radius: 12rpx;
    color: #fff;
}


.code-form-main {
    width: 560rpx;
    background-color: #fff;
    border-radius: 20rpx;
    padding: 60rpx 30rpx;

    /deep/ .uni-easyinput__content-input {
        height: 84rpx;
    }

    /deep/ .is-disabled {
        background-color: #F5F5F5 !important;
        color: #000 !important;
        border: none !important;
    }

    /deep/ .uni-easyinput__content {
        background-color: #F5F5F5 !important;
        color: #000 !important;
        border: none !important;
        border-radius: 20rpx !important;
    }

    /deep/ .uni-forms-item {
        margin-bottom: 30rpx !important;
    }

    //.is-input-border
    .code-item {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .send-code {
            width: 200rpx;
            height: 70rpx;
            line-height: 70rpx;
            color: #fff;
            font-size: 30rpx;
            font-weight: bold;
        }


    }

    .footer-btn-box {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .cancle-btn {
            width: 225rpx;
            height: 84rpx;
            background: #F6F9F8;
            border-radius: 6rpx;
            overflow: hidden;
            font-weight: 500;
            font-size: 32rpx;
            color: #999999;
            margin-right: 26rpx;
        }

        .confirm-btn {
            margin-left: 26rpx;
            width: 225rpx;
            height: 84rpx;
            background: #276FF7;
            border-radius: 6rpx;
        }
    }


}
</style>